import React, { useState } from 'react';
import { Radio, Button, Space, message, Tooltip } from 'antd';
import { InfoCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { useRequest } from 'ahooks';
import Modals from '@/components/modals/Modals';
import nl2sqlService from '@/api/services/nl2sqlService';
import { UpdateTableStatusRequest } from '@/types/nl2sql/type';

interface UpdateTableModalProps {
  visible: boolean;
  onCancel: () => void;
  onOk: () => void;
  tableName: string;
  tableId: string;
  databaseId: string;
}

const UpdateTableModal: React.FC<UpdateTableModalProps> = ({
  visible,
  onCancel,
  onOk,
  tableName,
  tableId,
  databaseId,
}) => {
  const [updateType, setUpdateType] = useState<'add' | 'overlap'>('add');

  // 使用 useRequest 调用更新数据表状态接口
  const { run: updateTableStatus, loading } = useRequest(
    async (data: UpdateTableStatusRequest) => {
      const response = await nl2sqlService.updateTableStatus(tableId, data);
      return response;
    },
    {
      manual: true,
      onSuccess: (result) => {
        console.log('更新数据表状态成功:', result);
        onOk();
      },
      onError: (error) => {
        message.error('更新失败');
        console.error('更新数据表失败:', error);
      },
    }
  );

  // 处理确定按钮点击
  const handleOk = async () => {
    // 根据更新类型确定状态
    const updateStatus: 'add' | 'overlap' = updateType;
    
    // 构建请求参数
    const requestData: UpdateTableStatusRequest = {
      database_id: databaseId,
      update_status: updateStatus,
    };

    // 调用接口
    updateTableStatus(requestData);
  };

  // 处理取消按钮点击
  const handleCancel = () => {
    onCancel();
  };

  return (
    <Modals
      title="选择更新范围"
      open={visible}
      onCancel={handleCancel}
      width={500}
      destroyOnHidden={true}
      onOk={handleOk}
      okText="更新"
      cancelText="取消"
      maskClosable={false}
      confirmLoading={loading}
      footerOkDisabled={loading}
    >
      <div className="p-0">
        <div>
          <Radio.Group 
            value={updateType} 
            onChange={(e) => setUpdateType(e.target.value)}
            className="w-full"
          >
            <Space direction="vertical" className="w-full">
              <Radio 
                value="add" 
                className="w-full p-3 transition-colors"
              >
                <div className="flex items-start">
                  <div className="flex-1">
                    <div className="font-medium text-gray-900">保留并新增
                      <Tooltip title={"保留原有的数据表信息，将数据库新增的字段信息补充进来"}>
                        <QuestionCircleOutlined className="ml-1 text-[#86909C]" />
                      </Tooltip>
                    </div>
                  </div>
                  {/* <InfoCircleOutlined className="text-blue-500 ml-2 mt-1" /> */}
                </div>
              </Radio>
              
              <Radio 
                value="overlap" 
                className="w-full p-3 transition-colors"
              >
                <div className="flex items-start">
                  <div className="flex-1">
                    <div className="font-medium text-gray-900">覆盖
                      <Tooltip title={"覆盖原有的数据表信息"}>
                        <QuestionCircleOutlined className="ml-1 text-[#86909C]" />
                      </Tooltip>
                    </div>
                  </div>
                  {/* <InfoCircleOutlined className="text-blue-500 ml-2 mt-1" /> */}
                </div>
              </Radio>
            </Space>
          </Radio.Group>
        </div>

        {/* <div className="flex justify-end space-x-3 pt-4 border-t border-gray-200">
          <Button onClick={handleCancel} disabled={loading}>
            取消
          </Button>
          <Button 
            type="primary" 
            onClick={handleOk}
            loading={loading}
          >
            更新
          </Button>
        </div> */}
      </div>
    </Modals>
  );
};

export default UpdateTableModal; 